<h4>模板变量</h4>
<pre class="note">
应用功能：在组件模板标签上，以定义变量的方式，将标签转换为可以直接作为变量使用的特殊语法
应用语法：＜标签 #变量名＞ 其中 #变量名 为当前标签DOM对应的纸袋名称
使用方式：模板变量可以像组件变量一样，被插值表达式，被方法绑定，被指令绑定……等 angular直接使用
         被定义的模板变量默认只能在当前模板范围内使用
限制和特性：
    1、一个模板范围中，模板变量的名称不能重复，如果出现重复会报错，且无法编译
    2、模板变量一定是在页面元素更新完成之后进行的加载
</pre>
<p #pDom>模板变量1</p>
<div>pDom:{{pDom}}</div>
<input type="button" value="打印Dom元素" (click)="printDom(pDom)">
<hr>
<pre class="note">
1、通过在index.html 文件中，加载对应三方功能JS，可以实现在组件TS中完成功能的调用和初始化
   因为插件为JS语法，组件开发为TS语法，语法不兼容，导致程序编译时对JS功能调用检验不通过
   * 可以通过 typeScript 语法的 declare 关键字， 将JS的功能导入到TS文件中
   * 在TS文件中，向导入语法一样，定义程序中的 JS功能，例如 declare var Swiper
   * 如果描述的变量不存在或者描述错误，TS不会完成校验，但程序运行会出先错误
2、通过修改 angular.json 文件中的 styles 和scripts 标签进行静态资源的装载
</pre>
<div class="swiper-container" #loop>
    <div class="swiper-wrapper">
        <div class="swiper-slide">slider1</div>
        <div class="swiper-slide">slider2</div>
        <div class="swiper-slide">slider3</div>
    </div>
</div>
<input type="button" value="initSwiper" (click)="initSwiper(loop)">
<pre class="note">
实际应用：
    因为程序在开发时存在需要，需要组件的TS能够主动直接获取页面中的模板变量
    + 因为模板变量的使用范围限制，无法完成在组件TS中直接调用
    + 在组件TS类中，可以通过angular内置的特殊方法 ViewChild 完成对于模板的加载
        ViewChild 方法以装饰器的方式，完成对组件中普通变量的描述，实现模板装载
        例如：
            @ViewChild("模板变量名",｛static:true｝)
            组件变量名;
        装饰器会将 模板变量指向的DOM，封装为 ElementRef 类型对象 的 nativeElement 属性上
        因此TS使用时，如果需要调用DOM元素，必须从nativeElement中获取
    + 实际使用时，一般会配合组件的生命周期函数使用
        * angular的组件生命周期和项目没有关系，仅表示当前组件的创建和删除的过程

</pre>
<div class="swiper-container" #loop1>
    <div class="swiper-wrapper">
        <div class="swiper-slide">slider1</div>
        <div class="swiper-slide">slider2</div>
        <div class="swiper-slide">slider3</div>
    </div>
</div>
